﻿@using ST.Torch.WebApi.Web.Core;
@inherits UtilRazorPage<object>
@{
    //Layout = "~/Views/Shared/_TableListLayout.cshtml";
    Layout = "~/Views/Shared/__ComponentLayout.cshtml";
    string randomId = Guid.NewGuid().ToString();

}
    <div style="padding: 5px;">
        <div class="layui-card">
            <div class="layui-card-body">
                <table class="layui-hide" id="tableEle_@randomId" lay-filter="tableEle_@randomId"></table>
            </div>
        </div>
    </div>

@section footer
{
    <script type="text/html" id="toolbarDemo_@randomId">
         <div style="display:flex">
             <div style="flex:1">
                  <div class="layui-btn-container">
                      <button class="layui-btn layui-btn-sm" lay-event="AddData"><i class="layui-icon layui-icon-add-circle"></i>@L("新增")</button>
                      <button class="layui-btn layui-btn-sm" lay-event="DelData"><i class="layui-icon layui-icon-delete"></i>@L("删除")</button>
                     
                </div>
             </div>
            <div style="width:200px;display:flex">
                 <input type="text"  id="Querykey" placeholder="" style="display: inline-block;height: 30px; line-height: 30px;;margin-right:5px" class="layui-input">
                 <button class="layui-btn layui-btn-sm" lay-event="QueryData">@L("查询")</button>
            </div>

        </div>
    </script>
    <script type="text/html" id="barDemo_@randomId">
        <div class="layui-clear-space">
          <a class="layui-btn layui-btn-xs" lay-event="edit">@L("编辑")</a>
          <a class="layui-btn layui-btn-xs" lay-event="assignrole">@L("分配角色权限")</a>
          <a class="layui-btn layui-btn-xs" lay-event="more">
                @L("更多")
            <i class="layui-icon layui-icon-down"></i>
          </a>
        </div>
    </script>
    <script type="text/html" id="ImgTpl_@randomId">
        <!-- 这里的 checked 的状态只是演示 -->
        <img src="{{d.Img}}" style="width:38px;height:38px" />
    </script>
    <script type="text/html" id="IsEnableTpl_@randomId">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" name="IsEnable" value="{{d.Id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="IsEnableF" {{ d.IsEnable == 1 ? "checked" : "" }}>
    </script>
    <script>
        var toast = null;
        var table =  null;
        var $ =  null;

        layui.use(['table', 'toast', 'dropdown', 'jquery', 'form'], function () {
            table = layui.table;
            var dropdown = layui.dropdown;
            var form = layui.form;
            toast = layui.toast;
            $ = layui.jquery;
          
            // 工具栏事件
            table.on('toolbar(tableEle_@randomId)', function (obj) {
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                var othis = lay(this);
                switch (obj.event) {
                    case 'QueryData':
                        var key = $("#Querykey").val();
                        table.reloadData('tableEle_@randomId', {
                            where: {
                                key: key,
                            },
                            page: { curr: 1, limit: 20 } // 重新指向分页
                        });
                        break;
                    case 'AddData':
                        var msgTilte = '@L("新增数据")';
                        GetViewHtml('/SYS/User/RenderViewToString', 'AddOrEdit', [], function (html) {
                            layer.open({
                                title: msgTitle,
                                type: 1,
                                area: ['40%', '80%'],
                                content: html,
                                success: function (layero, index, that) {
                                    G_LayuiOpenTypeIndex = index;
                                },
                                end: function (index, layero) {
                                    // 这里写关闭窗口后需要执行的代码
                                    console.log('窗口被关闭了End');
                                    reloadTableData();
                                },
                            });
                        })
                        break;
                    case 'DelData':
                        var data = checkStatus.data;
                        //obj.del(); // 删除对应行（tr）的DOM结构
                        console.log(data)
                        if (data.length >= 1) {
                            var msgTitle = '@L("确定删除选中的数据吗?")'
                            layer.confirm(msgTitle, function (index) {
                                var Ids = [];
                                for (var i in data) {
                                    Ids.push(data[i].Id)
                                }
                                DelBatchData(Ids)
                                layer.close(index);
                            });

                        } else {
                            var msgTitle = '@L("请选择要删除的数据")'
                            layer.alert(msgTitle);
                        }
                        //layer.alert(layui.util.escape(JSON.stringify(data)));
                        break;
                    case 'LAYTABLE_TIPS':
                        layer.alert('自定义工具栏图标按钮');
                        break;
                };
            });
            // 表头自定义元素工具事件 --- 2.8.8+
            table.on('colTool(tableEle_@randomId)', function (obj) {
                var event = obj.event;
                console.log(obj);
                if (event === 'email-tips') {
                    layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
                        title: '当前列属性配置项'
                    });
                }
            });

            // 触发单元格工具事件
            table.on('tool(tableEle_@randomId)', function (obj) { // 双击 toolDouble
                var data = obj.data; // 获得当前行数据
                // console.log(obj)
                if (obj.event === 'edit') {
                    var msgTitle = '@L("编辑")【' + data.Account + "】";
                    GetViewHtml('/SYS/User/RenderViewToString', 'AddOrEdit', [data.Id], function (html) {
                        layer.open({
                            title: msgTitle,
                            type: 1,
                            area: ['40%', '80%'],
                            content: html,
                            success: function (layero, index, that) {
                                G_LayuiOpenTypeIndex = index;
                            },
                            end: function (index, layero) {
                                // 这里写关闭窗口后需要执行的代码
                                console.log('窗口被关闭了End');
                                reloadTableData();
                            },
                        });
                    })
                } else if (obj.event === 'assignrole') {
                   
                    var msgTitle = '@L("分配权限")【' + data.Account + "】";
                    GetViewHtml('/SYS/User/RenderViewToString', 'AssignmentsRole', [data.Id], function (html) {
                        layer.open({
                            title: msgTitle,
                            type: 1,
                            area: ['40%', '80%'],
                            content: html,
                            success: function (layero, index, that) {
                                G_LayuiOpenTypeIndex = index;
                            },
                            end: function (index, layero) {
                                // 这里写关闭窗口后需要执行的代码
                                console.log('窗口被关闭了End');
                                reloadTableData();
                            },
                        });
                    })
                } else if (obj.event === 'more') {
                    // 更多 - 下拉菜单
                    dropdown.render({
                        elem: this, // 触发事件的 DOM 对象
                        show: true, // 外部事件触发即显示
                        data: [{
                            title: '@L("查看")',
                            id: 'detail'
                        }, {
                            title: '@L("重置密码")',
                            id: 'resetPassword'
                        }, {
                            title: '@L("删除")',
                            id: 'del'
                        }],
                        click: function (Userdata) {
                            if (Userdata.id === 'detail') {
                                //layer.msg('查看操作，当前行 ID:' + data.id);
                                var msg = '@L("当前列数据")'
                                layer.alert(layui.util.escape(JSON.stringify(data)), {
                                    title: msg
                                });
                            } else if (Userdata.id === 'del') {
                                var msg = '@L("确认删除行")';
                                layer.confirm(msg + ' [' + data.Account + '] ?', function (index) {
                                    obj.del(); // 删除对应行（tr）的DOM结构
                                    DelData(data.Id);
                                    layer.close(index);
                                    // 向服务端发送删除指令
                                });
                            } else if (Userdata.id === 'resetPassword') {
                                var msg = '@L("确认重置密码？")';
                                layer.confirm('[' + data.Account + ']'+msg, function (index) {
                                    //obj.del(); // 删除对应行（tr）的DOM结构
                                    ResetPassword(data.Id, true);

                                    layer.close(index);
                                    // 向服务端发送删除指令
                                });
                            }
                            
                        },
                        align: 'right', // 右对齐弹出
                        style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                    })
                }
            });

            // 触发表格复选框选择
            table.on('checkbox(tableEle_@randomId)', function (obj) {
                console.log(obj)
            });

            // 触发表格单选框选择
            table.on('radio(tableEle_@randomId)', function (obj) {
                console.log(obj)
            });

            // 行单击事件
            table.on('row(tableEle_@randomId)', function (obj) {
                //console.log(obj);
                //layer.closeAll('tips');
            });
            // 行双击事件
            table.on('rowDouble(tableEle_@randomId)', function (obj) {
                console.log(obj);
            });
            // function Toasttt(msg, type = "success") {
            //     if (type == "success") {
            //         toast.success({
            //             message: msg,
            //         });
            //     }
            // }

            // 状态 - 开关操作
            form.on('switch(IsEnableF)', function (obj) {
                console.log(obj)
                var id = this.value;
                var name = this.name;
                UpdateIsEnable(id, obj.elem.checked)
                //layer.tips(id + ' ' + name + ': ' + obj.elem.checked, obj.othis);
            });
            // 单元格编辑事件
            table.on('edit(tableEle_@randomId)', function (obj) {
                var field = obj.field; // 得到字段
                var value = obj.value; // 得到修改后的值
                var data = obj.data; // 得到所在行所有键值

            });


            function DelData(Id) {
                var formData = {
                    Id: Id
                };
                $.ajax({
                    type: 'POST',
                    url: '/api/SYSUser/Delete',//发送请求
                    data: formData,
                    success: function (result) {
                        console.log(result)
                        if (result.Succeeded) {
                            toast.success({
                                message: '@L("删除成功")',
                            });
                            reloadTableData();

                        } else {
                            toast.error({
                                message: '@L("删除失败")',
                            });

                        }
                    }
                });
            }
            function DelBatchData(Ids) {
                var formData = {
                    Ids: Ids
                };
                $.ajax({
                    type: 'POST',
                    url: '/api/SYSUser/DeleteBatch',//发送请求
                    data: formData,
                    success: function (result) {
                        console.log(result)
                        if (result.Succeeded) {
                            toast.success({
                                 message: '@L("删除成功")',
                             });
                            reloadTableData();

                        } else {
                            toast.error({
                                message: '@L("删除失败")',
                            });

                        }
                    }
                });
            }

            function Update(data) {
                $.ajax({
                    type: 'POST',
                    url: '/api/SYSUser/Update',//发送请求
                    data: data,
                    success: function (result) {
                        console.log(result)
                        if (result.Succeeded) {
                            Toast('@L("修改成功")')
                        } else {
                            toast.error({
                                message: '@L("修改失败")',
                            });
                        }
                    }
                });

            }
            function UpdateIsEnable(Id, IsEnable) {
                var data = {
                    Id: Id,
                    IsEnable: IsEnable
                }
                $.ajax({
                    type: 'POST',
                    url: '/api/SYSUser/UpdateIsEnable',//发送请求
                    data: data,
                    success: function (result) {
                        console.log(result)
                        if (result.Succeeded) {
                            toast.success({
                                message: '@L("修改成功")',
                            });
                        } else {
                            toast.error({
                                message: '@L("修改失败")',
                            });

                        }
                    }
                });
            }
            function ResetPassword(Id) {
                var data = {
                    Id: Id,
                    
                }
                $.ajax({
                    type: 'POST',
                    url: '/api/SYSUser/ResetPassword',//发送请求
                    data: data,
                    success: function (result) {
                        console.log(result)
                        if (result.Succeeded) {
                            toast.success({
                                message: '@L("重置成功")',
                            });
                        } else {
                            toast.error({
                                message: '@L("重置失败")',
                            });

                        }
                    }
                });
            }

            function reloadTableData() {
                var key = $("#Querykey_@randomId").val();
                table.reloadData('tableEle_@randomId', {
                    where: {
                        key: key,
                    },
                });
            }
        });
       
    </script>

}